<template>
  <div class="login-container">
    <div class="login-box">
      <!-- title -->
      <div class="login-title">账户密码登录</div>

      <!-- 表单区域 -->
      <el-form class="login-form" ref="loginFormRef" :model="loginForm">
        <el-form-item>
          <el-input v-model="loginForm.username" prefix-icon="el-icon-user" placeholder="账户"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" placeholder="密码"></el-input>
        </el-form-item>
      </el-form>

      <!-- 配置选项 -->
      <div class="login-option">
        <el-checkbox v-model="checked">自动登录</el-checkbox>
        <span class="wangji-mima">忘记密码</span>
      </div>

      <!-- 登录按钮 -->
      <div class="login-btn-box">
        <el-button class="login-btn" type="primary" @click="onLogin">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { userLogin } from '@/assets/api/user/user.js'

export default {
  name: 'Login',
  created () { },
  data () {
    return {
      // 登录信息
      loginForm: {
        username: 'editor@admin.com',
        password: '8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92',
      },
      // 忘记密码
      checked: 'false',
      loginFormRef: {
        username: [
          { required: true, message: '请输入账户', trigger: 'blur' },
          { min: 3, max: 6, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    // 登录
    onLogin () {
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return;
        try {
          const { data: res } = await userLogin(this.loginForm);

          // console.log(res.data)
          // 将 token 保存到本地存储
          this.$store.commit('getToken', res.token);

          this.$router.push('/');
        } catch (err) {
          this.$message.error(err.response);
        }
      });
    },
  },
};
</script>

<style  lang='less' scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: url('~@/assets/images/login.jpg') no-repeat;
  background-size: cover;

  .login-box {
    width: 400px;
    height: 300px;

    .login-title {
      width: 140px;
      height: 30px;
      color: #1890ff;
      text-align: center;
      margin: 0 0 30px 30px;
      border-bottom: 2px solid #1890ff;
    }

    .login-form {
      width: 100%;
    }

    .login-option {
      display: flex;
      justify-content: space-between;

      .wangji-mima {
        color: #1890ff;
      }
    }

    .login-btn-box {
      width: 100%;
      margin-top: 30px;

      .login-btn {
        width: 100%;
      }
    }
  }
}
</style>
